<template>
  <div class="common-layout">
    <el-container>
      <h2>上传文件</h2>
      
      <el-header height="180px">
        <el-form
            :label-position="top"
            :inline=true
            :model="fileForm"
            label-width="200px"
        >
          <el-form-item label="文件信息">
            <el-upload
                class="upload-demo"
                :on-change="onChange"
                :on-remove="onRemove"
                :auto-upload="false"
            >
              <el-button size="small" type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" size="large" @click="onUpload" round>上传文件</el-button>
          </el-form-item>
        </el-form>
        <h4>进度条参考:</h4>
        <Progress :width="600" :progress="Progress.progress" :strokeWidth="Progress.strokeWidth"
                  :showInfo="true"/>
      </el-header>
    </el-container>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import {ElButton, ElInput, ElMessage, ElPagination} from 'element-plus'
import {breakpointUpload, getFilePage, removeFile, verifyFile} from '@/api/FileApi'
import CryptoJS from "crypto-js";
import Progress from "@/components/Progress.vue";

export default {
  name: 'FilePageView',
  computed: {
    progress() {
      return Progress
    }
  },
  // eslint-disable-next-line vue/no-unused-components
  components: {ElInput, ElButton, ElPagination, Progress},
  props: {
    msg: String,
  },
  created() {
   // this.getTableDate();
  },
  data() {
    return {
      Progress: {
        progress: 0,
        strokeWidth: 10
      },
      searchForm: {
        fileName: '',
        pageNum: '1',
        pageSize: '10'
      },
      fileForm: {
        file: ''
      },
      fileInfo: {
        fileId: '',
        fileName: '',
        fileSize: '',
        chunkFlag: '',
        chunkFolder: '',
        chunkMd5: '',
        shardTotal: 0,
        shardIndex: 0,
        shardSize: '',
        lastModified: '',
        shardList: [],
        endFlag: ''
      },
      tableData: [],
      pager: {
        currentPage: '',
        pageSize: '',
        total: ''
      },
    };
  },
  methods: {
    onChange(e) {
      // 在选择文件信息变更的时候进行将文件信息赋值
      this.fileForm.file = e;
      this.Progress.progress = 0;
    },
    onRemove(e) {
      // 在选择文件信息变更的时候进行将文件信息赋值
      this.fileForm.file = null;
      this.Progress.progress = 0;
    },
    onUpload() {
      // 在上传文件的时候携带其他参数进行提交内容
      // 先请求 校验文件接口, 验证文件是否已上传,和上传到了哪个分片
      let realFile = this.fileForm.file.raw;

      let fileType = realFile.name.substring(realFile.name.lastIndexOf(".") + 1, realFile.name.length);
      let filePwd = realFile.name + realFile.size + fileType + realFile.lastModified;
      let filePwdMd5 = CryptoJS.MD5(filePwd).toString();
	  
	  console.log("***",filePwd);

      let verifyData = new FormData();
      verifyData.append('file', realFile);
      verifyData.append('fileName', realFile.name);
      verifyData.append('fileSize', realFile.size);
      verifyData.append('lastModified', realFile.lastModified);
      verifyData.append('chunkMd5', filePwdMd5);
      // 业务相关字段
      verifyData.append('businessId', '1111111');
      verifyData.append('busMode', 'DEV_MODEL');

      // 校验文件, 并返回文件的分片数量,文件大小,文件ID,文件分片所需截取信息
      verifyFile(verifyData).then(res => {
        this.fileInfo = res.data.data;
		
		
        // 最后一个分片标识
        if (this.fileInfo.endFlag) {
          // 进度条
          this.Progress.progress = 100;
        } else {
          // 进度条计算
          this.Progress.progress = ((this.fileInfo.shardIndex / this.fileInfo.shardTotal) * 0.1) * 1000;
        }
        this.uploadShardFile(realFile);
      });
    },
    uploadShardFile(realFile) {
      // 对文件流按照校验接口的返回值进行截取,使用for循环 重复调用断点续传文件接口
      const asyncUpload = async () => {
        for (let i = 0; i < this.fileInfo.shardList.length; i++) {
          let item = this.fileInfo.shardList[i]
          let shardFile = realFile.slice(item.shardStart, item.shardEnd);
          let data = new FormData();
          data.append('fileId', this.fileInfo.fileId);
          data.append('file', shardFile);
          data.append('shardIndex', item.shardIndex);
          const res = await breakpointUpload(data)
          let uploadData = res.data.data;
          console.log(uploadData)
          // 最后一个分片标识
          if (uploadData.endFlag) {
            // 进度条计算
            this.Progress.progress = 100;
          } else {
            // 进度条计算
            this.Progress.progress = Math.round(((uploadData.shardIndex / uploadData.shardTotal) * 0.1) * 1000);
          }
          console.log(((uploadData.shardIndex / uploadData.shardTotal) * 0.1) * 1000)
          console.log(uploadData.shardIndex)
        }
      }
      asyncUpload()

    },

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.demo-pagination-block {
  margin-top: 10px;
  margin-bottom: 16px;
  text-align: center;
}

.el-link {
  margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>
